<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>19-表格校验</title>
    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-button icon="el-icon-plus" type="primary" @click="flag = true">添加用户</el-button>

    <el-dialog :visible.sync="flag" title="添加用户信息" @close="resetForm()">

        <!-- :model="adduser"表单绑定数据 :rules="ruleReg"指定校验规则 ref="frm"获取表单-->
        <el-form :model="adduser" :rules="ruleReg" ref="frm">
            <!--表单项： el-form-item-->
            <el-form-item label="用户" label-width="60px" prop="username">
                <el-input name="username" type="text" prefix-icon="el-icon-user" placeholder="请输入用户名"
                          v-model="adduser.username"></el-input>
            </el-form-item>
<!--            年龄-->
            <el-form-item label="年龄" label-width="60px">
                <el-input-number name="age" :min="0" :max="120" :step="1" v-model="adduser.age"></el-input-number>
            </el-form-item>

            <el-form-item label="性别" label-width="60px">
                <el-radio-group v-model="adduser.sex">
                    <el-radio name="sex" label="1">男</el-radio>
                    <el-radio name="sex" label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="生日" label-width="60px">
                <el-date-picker name="birthday" type="datetime" v-model="adduser.birthday"></el-date-picker>
            </el-form-item>

            <el-form-item label="地址" label-width="60px" prop="address">
                <el-input name="address" prefix-icon="el-icon-location" type="text" placeholder="请输入地址"
                          v-model="adduser.address"></el-input>
            </el-form-item>

            <el-form-item label="爱好" label-width="60px">
                <el-checkbox-group v-model="adduser.hobby">
                    <el-checkbox label="1" name="bobby">抽烟</el-checkbox>
                    <el-checkbox label="2" name="bobby">喝酒</el-checkbox>
                    <el-checkbox label="3" name="bobby">槟榔</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item label="职业" label-width="60px">
                <el-select v-model="adduser.job">
                    <el-option name="job" label="程序猿" value="1"></el-option>
                    <el-option name="job" label="攻城狮" value="2"></el-option>
                    <el-option name="job" label="码农" value="3"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="婚姻" label-width="60px">
                <el-switch name="merry" inactive-text="未婚" active-text="已婚" v-model="adduser.merry"></el-switch>
            </el-form-item>

            <el-from-item>
                <el-row type="flex" justify="center">
                    <el-col :span="4">
                        <el-button type="success" icon="el-icon-check" @click="formSubmit()">确定</el-button>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="danger" icon="el-icon-close" @click="resetForm()">取消</el-button>
                    </el-col>
                </el-row>
            </el-from-item>
        </el-form>
    </el-dialog>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            flag: false,
            adduser: {
                username: undefined,
                age: 0,
                sex: "1",
                birthday: undefined,
                address: undefined,
                hobby: ["1"],
                job: "1",
                merry: false,
            },
            ruleReg: {
                username: [
                    {required: true, message: "用户名不能为空", trigger: "blur"},
                    {min: 2, max: 10, message: "用户名长度必须在2-10之间", trigger: "blur"},
                ],
                address: [
                    {required: true, message: "地址不能为空", trigger: "blur"},
                    {min: 2, max: 60, message: "地址长度必须在2-60", trigger: "blur"},
                ]
            },
        },
        methods: {
            // 提交时校验表单全部内容
            formSubmit: function () {
                this.$refs["frm"].validate(flag => {
                    if (flag) {
                        alert("表单全部校验通过");
                        this.flag=false;
                    } else {
                        alert("表单校验未通过！");
                    }
                });
            },

            // 重置表单内容
            resetForm: function () {
                this.$refs["frm"].resetFields()
            }
        }
    });
</script>
</body>
</html>